/*
 * @Author: 肖思汗 
 * @Date: 2025-06-04 16:24:00 
 * @Last Modified by: 肖思汗
 * @Last Modified time: 2025-07-11 20:05:38
 */


import { autorun, toJS } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./sizeColorPopup.module.less";
import { Button, Popup } from "@nutui/nutui-react-taro";
import { GoodsBaseData } from "types/type";
import sizeColorPopupStore from "./sizeColorPopupStore";
import { View, Text } from "@tarojs/components";
import clsx from "clsx";
import Taro from "@tarojs/taro";
import toDesign from "src/subPages/Design/designComponent/toDesign";
import ColorItem from "src/components/ColorItem/ColorItem";
import MyPopup from "src/components/MyPopup/MyPopup";

interface Iprops {
    children?: ReactNode
}

const generateRandomColors = (count: number) => {
    return Array.from({ length: count }, () =>
        `#${Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0')}`
    );
};

const testColors = generateRandomColors(15);

// 颜色尺码弹出层
export default function SizeColorPopup() {

    // 颜色
    const [colors, setColors] = useState<GoodsBaseData["data"]["colors"]>(toJS(sizeColorPopupStore.colors));
    // 尺码
    const [sizes, setSizes] = useState<GoodsBaseData["data"]["sizes"]>(toJS(sizeColorPopupStore.sizes));
    // 显示弹出层
    const [open, setOpen] = useState(sizeColorPopupStore.open);
    // 当前选中的尺码
    const [selectedSize, setSelectedSize] = useState(sizeColorPopupStore.selectedSize);
    // 当前选中的颜色
    const [selectedColor, setSelectedColor] = useState<string>(sizeColorPopupStore.selectedColor);
    const [selectedColorValue, setSelectedColorValue] = useState<`#${string}`>(sizeColorPopupStore.selectedColorValue);

    const [loading, setLoading] = useState(false);

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {
        setSelectedSize(sizeColorPopupStore.selectedSize);
        setSelectedColor(sizeColorPopupStore.selectedColor);
        setSelectedColorValue(sizeColorPopupStore.selectedColorValue);
        setOpen(sizeColorPopupStore.open);
        setColors(toJS(sizeColorPopupStore.colors));
        setSizes(toJS(sizeColorPopupStore.sizes));

    }, { delay: 30 }), []);

    return (
        <MyPopup
            open={open}
            className={styles.sizeColorPopup}
            title={`选择尺码${colors.length > 0 ? '和颜色' : ''}`}
            onClose={() => {
                sizeColorPopupStore.setData({ open: false });
            }}
        >

            <View className={styles.title}>尺码</View>
            <View className={styles.sizeOptions}>
                {sizes.map((size) => (
                    <Text
                        key={size.name}
                        className={clsx(styles.sizeOption, size.name === selectedSize && styles.selected)}
                        onClick={() => setSelectedSize(size.name)}
                    >
                        {size.name}
                    </Text>
                ))}
            </View>
            {
                colors.length > 0 &&
                <>
                    <View className={styles.title}>颜色</View>
                    <View className={styles.colorBox} >
                        {colors.map((c, index) => (
                            <ColorItem
                                key={index}
                                color={c.color}
                                active={selectedColorValue === c.color}
                                onClick={() => {
                                    setSelectedColorValue(c.color);
                                    setSelectedColor(c.cn || "");
                                }}
                            />
                        ))}
                    </View>
                </>
            }
            <Button
                loading={loading}
                type="primary"
                block
                className={styles.confirmButton}
                onClick={async () => {
                    setLoading(true);
                    const { productId, productTypeId, designName } = sizeColorPopupStore;
                    await toDesign({
                        productId,
                        productNegativeId: productTypeId,
                        designName: designName || "",
                        size: selectedSize,
                        color: selectedColor,
                        colorValue: selectedColorValue,
                        needupload: true,
                    })
                    sizeColorPopupStore.setData({ open: false });
                    setLoading(false);
                }}
            >去设计</Button>

        </MyPopup>

    );
}